<template>
  <transition name="dialog-fade">
    <el-dialog
        :close-on-click-modal=false
        v-if="showDialog"
        :title="dialogTitle"
        :visible.sync="showDialog"
        class="dialog-component"
        width="800px"
        @close="closeDialog(0)">
      <div>
        <el-form ref="meetingForm" :model="meetingForm" :rules="rules">
          <el-form-item :label="'会议/项目名称'" required prop="name">
            <el-input v-model="meetingForm.name" :autosize="{ minRows: 2}" type="textarea"></el-input>
          </el-form-item>
          <el-form-item :label="'会议/项目人员'">
            <el-input v-model="meetingForm.remarks" :autosize="{ minRows: 2}" type="textarea"></el-input>
          </el-form-item>
          <el-form-item :label="'会议/项目链接'">
            <el-input v-model="meetingForm.url" class="input-with-select" placeholder="请输入会议/项目链接">
              <el-select slot="prepend" v-model="meetingForm.urlType" class="link-selector" placeholder="请选择">
                <el-option label="内网链接" value="smb"></el-option>
                <el-option label="外网链接" value="http"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="submitForm('meetingForm')">确定</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: "MeetingEditor",
  props: {
    dialogTitle: {
      type: String,
      default: "添加",
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      showDialog: false,
      meetings: [],
      index: -1,
      meetingForm: JSON.parse(JSON.stringify(this.itemInfo)),
      rules:{
        name:[{required:true,message:'会议/项目名称不能为空！'}]
      }
    }
  },
  mounted() {

  },
  computed: {},
  watch: {},
  methods: {
    test(){console.log(this.meetingForm)},
    // 保存操作
    submitForm(formName) {
      const that = this;
      //const params = Object.assign(that.meetingForm, {});
      that.$refs[formName].validate((valid) => {
        // console.log('meetingForm',this.meetingForm)
        if (valid) {
          if (this.index === -1) {
            this.meetings.unshift(this.meetingForm);
          } else {
            this.meetings[this.index] = this.meetingForm;
          }
          that.closeDialog(1);
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      //this.$refs["meetingForm"].resetFields();
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    },
  },

}
</script>

<style scoped>

</style>
<style>
/*会议链接类型下拉框*/
.el-select.link-selector .el-input {
  width: 120px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>